// 在react中组件的后缀名是js或者jsx
// rfce快捷键，生成组件模板
// 函数组件return的东西就是页面渲染的东西，每个组件只能有一个根标签
// 在react中遵循jsx语法 ，jsx语法就是html和js的混写，规则就是遇到<>解析html，遇到{}解析js
import {useState} from "react"
import Appson from "./appson"
import Appclass from "./appclass"
import {Provider} from "../utils/context"
import React from 'react'


function App() {
   let [name,setName] = useState("赵志豪") // 声明一个状态，状态的初始值叫zhangsan，修改这个值的方法叫setName
   let [age,setAge] = useState(20)
   let  [obj,setObj] = useState({
       name:"zhamnhgsn"
   })
   let fn = (data)=>{
       setName(data)
   }
   let fn1 = (data)=>{
        console.log(data);
        setName(data)
   }
  return (
    <div>
        <h4>{name}</h4>
        <h4>{age}</h4>
        {/* 如果执行的函数需要传参，那我们把这个函数写到一个箭头函数中 */}
        <button onClick={()=>fn("lisi")}>点击我修改name</button>
       
        {/* react是单向数据流，子组件不能给父组件直接传参，需要父组件给子组件传递一个方法，组件间调用父组件的方法 */}
        <Provider value={obj}>
            <Appson send="我是父组件的数据" name={name} fn={fn1}></Appson>
        </Provider>
         
        <hr />
        <Appclass send="我是父组件中的数据" name222 ="我是父组价传来得name222"></Appclass>
    </div>
  
  )
}

export default App